<script lang="ts">
  export default {
    name: 'Category',
  };
</script>

<script setup lang="ts">
  import { onMounted, ref, unref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import API_BANNER from '@/apis/banner';
  import IMAGE_LIST_EMPTY from '@/assets/images/empty/good.png';
  import IMGicon from '@/assets/img/add1.png'
  import { showToast } from 'vant';
  import { useWebAppNavigation } from 'vue-tg'
  onMounted(() => {
    getKeyword()
    getCate()
  });
  const showPopover = ref(false)
  const keywordList = ref([])
  let searchVal = ref('')
  const cateList = ref([])
  const contentList = ref([])
  const Params = ref({
    cate_id: '1',
    keyword: '',
    page: 1,
    limit: 10
  })
  const loading = ref(false);
  const finished = ref(false);
  const router = useRouter();

  // 获取关键词
  const getKeyword = async () => {
    let res = await API_BANNER.indexKeyword()
    if (res.code == 1) {
      keywordList.value = res.data
    }
  }
  // 查询关键字
  const keyWordSearch = (data) => {
    Params.value.keyword = data
    searchList()
  }
  // 获取分类列表
  const getCate = async () => {
    let res = await API_BANNER.contentCateList({
      page: 1,
      limit: 8
    })
    if (res.code == 1) {
      Params.value.cate_id = res.data.data[0].id
      cateList.value = res.data.data
      getContentList()
    }
  }
  // 获取列表
  const getContentList = async () => {
    let res = await API_BANNER.contentList(Params.value)
    if (res.code == 1) {
      contentList.value = [...contentList.value, ...res.data.data]
      if (res.data.data.length < Params.value.limit) {
        finished.value = true
      } else {
        loading.value = false;
      }
    }
  }

  // 查询分类
  const chooseCate = (data) => {
    Params.value.cate_id = data.id
    searchList()
  }
  // 触底事件
  const onLoad = () => {
    console.log(123, 'a');
    Params.value.page = Params.value.page + 1
    getContentList()
  }
  // 查询列表
  const searchList = async () => {
    Params.value.page = 1
    contentList.value = []
    getContentList()
  }

  // 跳转页面
  const goPage = (url, data) => {
    if (data) {
      router.push({
        path: url,
        query: {
          id: data
        }
      })
    } else {
      router.push({
        path: url,
      })
    }
  }
  // 跳转到iframe
  const goIframe = (url) => {
    router.push({
      name: 'iframe',
      params: {
        url
      }
    })
  }
  // 跳转至tg
  const goTGlink = (data) => {
    let { openLink, openTelegramLink } = useWebAppNavigation()

    openTelegramLink(data)

  }
</script>

<template>
  <div class="container">
    <div class="search">
      <van-popover v-model:show="showPopover" placement="bottom-start">
        <div style="padding: 20px;">
          <span v-for="i in keywordList" :key="i.id" style="margin: 0 6px;" @click="keyWordSearch(i.keyword)">
            {{i.keyword}}
          </span>
        </div>
        <template #reference>
          <div>
            <van-search v-model="Params.keyword" :clearable="false" shape="round" background="transparent"
              @search="searchList" :placeholder="$t('home.please')+' '+$t('home.keyword')"
              style="padding-left:0 ;padding-right: 0" />
          </div>
        </template>
      </van-popover>

    </div>
    <!-- 分类 -->
    <div class="midIcon flex al-center jus-arn">
      <div class="midIcon_item " v-for="i in cateList" :key="i.id" @click="chooseCate(i)">
        <img :src="i.image" alt="" style="width: 36px;height: 36px;">
        <div>{{i.title}}</div>
      </div>
    </div>
    <div style="height: 16px;"></div>
    <div class="recommend">
      <van-list v-model:loading="loading" :finished="finished" loading-text="loading" :finished-text="$t('home.noMore')"
        @load="onLoad" offset="50" :immediate-check="false">
        <div class="recommend_item" v-for="i in contentList " :key="i.id">
          <div class="top" @click=" goPage('/recommend',i.id)">
            <div class=" flex al-center jus-bet">
              <h3 style="margin: 6px 0;">{{i.title}}</h3>

            </div>
            <div class="midTag">
              <span style="padding-right: 10px;" v-for="ii in i.content_label_text" :key="ii">{{ii}}</span>
            </div>
            <div class="tit " style="width: 60%;margin-top: 6px;" v-for="iii in i.ensure_label_text" :key="iii">
              <span>
                {{iii}}
              </span> <img src="@/assets/img/danbao.png" alt="" style="width: 12px;height: 12px;margin-left: 2px;">
            </div>
          </div>
          <br>
          <van-divider dashed :style="{ borderColor: '#cbcbcb',margin:'8px 0'}"></van-divider>
          <div class="bottom flex al-center jus-bet">
            <span @click="goTGlink(i.contact_url)" style="color: #4d90fe;">{{$t('home.Contact')+':'+i.contact}}</span>
            <span>{{i.createtime}}</span>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>
<style lang="less" scoped>
  .container {

    padding: 20px;
    background: url("@/assets/img/fenleiBj.jpg")no-repeat;
    background-size: 100% 100%;

    :deep(.van-popover__wrapper) {
      width: 100%;

    }

    .midIcon {
      background-color: #fff;
      border-radius: 12px;
      padding: 16px;
      margin-top: 10px;
      flex-wrap: wrap;

      .midIcon_item {
        width: 24%;
        text-align: center;
        margin-bottom: 16px;

      }
    }

    .recommend_item {
      background-color: #fff;
      padding: 12px;
      border-radius: 12px;
      margin-bottom: 16px;

      .top {
        .tit {
          background-color: #4d90fe;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 30px;
          color: #fff;
        }

        .midTag {
          color: #9d9d9d;
        }
      }

      .bottom {
        color: #9d9d9d;
      }
    }


  }
</style>